<template>
  <div id="tianditu-map" class="map-container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import L from 'leaflet';
import "leaflet/dist/leaflet.css";

// ✅ 使用你自己的天地图密钥
const TIANDITU_TOKEN = '40ebdf578d4b77c8f3e64238cf2f2431';

// ✅ 使用 EPSG:3857 版本的图层（img_c 和 cia_c）
const tiandituImgUrl = `https://t{s}.tianditu.gov.cn/img_w/wmts?` +
  `SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&` +
  `TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${TIANDITU_TOKEN}`;

const tiandituLabelUrl = `https://t{s}.tianditu.gov.cn/cia_w/wmts?` +
  `SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&` +
  `TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${TIANDITU_TOKEN}`;

onMounted(() => {
  // 初始化地图
  const map = L.map('tianditu-map', {
    center: [39.89945, 116.40969], // 北京
    zoom: 4,
    crs: L.CRS.EPSG3857
  })

  // 天地图影像图层
  const imgLayer = L.tileLayer(tiandituImgUrl, {
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    tileSize: 256,
    minZoom: 1,
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.tianditu.gov.cn/">天地图</a>'
  });

  // 中文标注图层
  const labelLayer = L.tileLayer(tiandituLabelUrl, {
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    tileSize: 256
  });

  // 图层叠加
  L.layerGroup([imgLayer, labelLayer]).addTo(map);

  // 缩放控件与比例尺
  L.control.scale().addTo(map);
  map.addControl(new L.Control.Zoom({ position: 'topright' }));


  // 创建控件容器
const infoControl = L.control({ position: 'bottomleft' });

infoControl.onAdd = function () {
  const div = L.DomUtil.create('div', 'map-info');
  div.innerHTML = `层级: ${map.getZoom()}<br>坐标: --`;
  return div;
};

infoControl.addTo(map);

// 更新层级显示
map.on('zoomend', () => {
  const div = document.querySelector('.map-info');
  if (div) {
    div.innerHTML = `层级: ${map.getZoom()}<br>坐标: --`;
  }
});

// 更新坐标显示
map.on('mousemove', (e) => {
  const div = document.querySelector('.map-info');
  if (div) {
    const { lat, lng } = e.latlng;
    div.innerHTML = `层级: ${map.getZoom()}<br>坐标: ${lat.toFixed(6)}, ${lng.toFixed(6)}`;
  }
});

});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}
.map-info {
  backdrop-filter: blur(6px);                     /* 毛玻璃模糊背景 */
  background: rgba(0, 0, 0, 0.45);                /* 半透明黑色背景 */
  color: #fff;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 10px;
  line-height: 1.6;
  font-family: "Arial", sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);       /* 更明显阴影 */
  border: 1px solid rgba(255, 255, 255, 0.2);      /* 柔和白边 */
  pointer-events: none;                           /* 避免遮挡鼠标事件 */
  white-space: nowrap;
}
</style>
